<template>
	<base-page ref="basePage" @submit="handleSubmit">
		<!-- 详情数据 -->
		<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20"
		:style="{'background-color': skinColor.color_bg_1}">
			<text class="fs-24 y-flex-1" :style="{'color': skinColor.color_blue}">detail详情静态数据</text>
			<template v-for="(key, i) in Object.keys(detailForm.staticData)">
				<form-item
				v-if="key != 'tags'"
				v-model="detailForm.staticData[key]"
				:type="detailData[key].type"
				:label="detailData[key].label"
				:disabled="disabled"
				:padding-show="false"></form-item>
			</template>
			<text class="fs-24 y-flex-1 mt-20" :style="{'color': skinColor.color_blue}">detail详情标签静态数据</text>
			<view class="position-relative y-flex y-row y-align-center border-bottom-1 pt-20 pb-20"
			:style="{'border-bottom-color': skinColor.color_gap_1}"
			 v-for="(item, index) in detailForm.staticData.tags" :key="index">
				<view class="y-flex y-flex-1">
					<text class="fs-26" :style="{color: skinColor.color_3}">标签文字</text>
					<input class="fs-26 mt-20" type="text" v-model="item.title" placeholder="输入标签文字" :style="{color: skinColor.color_1}">
				</view>
				<view class="y-flex y-flex-1">
					<text class="fs-26" :style="{color: skinColor.color_3}">跳转路径</text>
					<input class="fs-26 mt-20" type="text" v-model="item.url" placeholder="输入跳转路径" :style="{color: skinColor.color_1}">
				</view>
				<com-icon class="position-absolute right-20 top-20" name="close" size="30rpx" :color="skinColor.color_3" :disabled="disabled" @click="handleCloseStaticTag(index)"></com-icon>
			</view>
			<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleAddStaticTag">
				<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
				<text class="fs-28" :style="{color: skinColor.color_1}">添加标签静态数据</text>
			</view>
		</view>
		<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20"
		:style="{'background-color': skinColor.color_bg_1}">
			<text class="fs-24 y-flex-1" :style="{'color': skinColor.color_blue}">detail详情动态请求</text>
			<form-item
			v-for="(key, i) in Object.keys(detailForm.request)"
			Key="i"
			closeable
			v-model="detailForm.request[key]"
			:type="request[key].type"
			:label="request[key].label"
			:disabled="disabled"
			:padding-show="false"
			@close="handleCloseRequest('detailForm', key)"></form-item>
			<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleRequestSelect('detailForm')">
				<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
				<text class="fs-28" :style="{color: skinColor.color_1}">添加请求属性</text>
			</view>
		</view>
		<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20"
		:style="{'background-color': skinColor.color_bg_1}">
			<text class="fs-24 y-flex-1 mt-20" :style="{'color': skinColor.color_blue}">detail详情动态数据</text>
			<template v-for="(key, i) in Object.keys(detailForm.dynamicData)">
				<form-item
				v-if="key != 'tags'"
				v-model="detailForm.dynamicData[key]"
				type="rule"
				:label="detailData[key].label + '规则'"
				:disabled="disabled"
				:padding-show="false"></form-item>
			</template>
			<text class="fs-24 y-flex-1 mt-20" :style="{'color': skinColor.color_blue}">detail详情标签列表动态数据</text>
			<form-item
			v-for="(key, i) in Object.keys(detailForm.dynamicData.tags)"
			:key="i"
			v-model="detailForm.dynamicData.tags[key]"
			type="rule"
			:label="(tagData[key] ? tagData[key].label : '列表') + '规则'"
			:disabled="disabled"
			:padding-show="false"></form-item>
		</view>
		
		<!-- 章节列表数据 -->
		<template v-if="itemData">
			<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20"
			:style="{'background-color': skinColor.color_bg_1}">
				<text class="fs-24 y-flex-1" :style="{'color': skinColor.color_blue}">items列表动态请求</text>
				<form-item
				v-for="(key, i) in Object.keys(itemsForm.request)"
				Key="i"
				closeable
				v-model="itemsForm.request[key]"
				:type="request[key].type"
				:label="request[key].label"
				:disabled="disabled"
				:padding-show="false"
				@close="handleCloseRequest('itemsForm', key)"></form-item>
				<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleRequestSelect('itemsForm')">
					<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
					<text class="fs-28" :style="{color: skinColor.color_1}">添加请求属性</text>
				</view>
			</view>
			<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20"
			:style="{'background-color': skinColor.color_bg_1}">
				<text class="fs-24 y-flex-1 mt-20" :style="{'color': skinColor.color_blue}">items列表动态数据</text>
				<template v-for="(key, i) in Object.keys(itemsForm.dynamicData)">
					<form-item
					v-model="itemsForm.dynamicData[key]"
					type="rule"
					:label="(itemData[key] ? itemData[key].label : dynamicList[key] ? dynamicList[key].label : key) + '规则'"
					:disabled="disabled"
					:closeable="!itemData[key] && key != 'list'"
					:padding-show="false"
					@close="handleCloseDynamicProperty(key)"></form-item>
				</template>
				<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleAddDynamicProperty">
					<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
					<text class="fs-28" :style="{color: skinColor.color_1}">添加自定义属性</text>
				</view>
			</view>
		</template>
		
		<!-- 正文数据 -->
		<template v-if="contextData">
			<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20"
			:style="{'background-color': skinColor.color_bg_1}">
				<text class="fs-24 y-flex-1" :style="{'color': skinColor.color_blue}">context正文静态数据</text>
				<template v-for="(key, i) in Object.keys(contextForm.staticData)">
					<form-item
					v-if="key != 'tag'"
					v-model="contextForm.staticData[key]"
					:type="contextData[key].type"
					:label="contextData[key].label"
					:disabled="disabled"
					:padding-show="false"></form-item>
				</template>
			</view>
			<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20"
			:style="{'background-color': skinColor.color_bg_1}">
				<text class="fs-24 y-flex-1" :style="{'color': skinColor.color_blue}">context正文动态请求</text>
				<form-item
				v-for="(key, i) in Object.keys(contextForm.request)"
				Key="i"
				closeable
				v-model="contextForm.request[key]"
				:type="request[key].type"
				:label="request[key].label"
				:disabled="disabled"
				:padding-show="false"
				@close="handleCloseRequest('contextForm', key)"></form-item>
				<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleRequestSelect('contextForm')">
					<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
					<text class="fs-28" :style="{color: skinColor.color_1}">添加请求属性</text>
				</view>
			</view>
			<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20"
			:style="{'background-color': skinColor.color_bg_1}">
				<text class="fs-24 y-flex-1 mt-20" :style="{'color': skinColor.color_blue}">context正文动态数据</text>
				<template v-for="(key, i) in Object.keys(contextForm.dynamicData)">
					<form-item
					v-if="key != 'tag'"
					v-model="contextForm.dynamicData[key]"
					type="rule"
					:label="contextData[key].label + '规则'"
					:disabled="disabled"
					:padding-show="false"></form-item>
				</template>
			</view>
		</template>
		
		<!-- 评论列表数据 -->
		<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20"
		:style="{'background-color': skinColor.color_bg_1}">
			<text class="fs-24 y-flex-1" :style="{'color': skinColor.color_blue}">comments评论列表动态请求</text>
			<form-item
			v-for="(key, i) in Object.keys(commentsForm.request)"
			Key="i"
			closeable
			v-model="commentsForm.request[key]"
			:type="request[key].type"
			:label="request[key].label"
			:disabled="disabled"
			:padding-show="false"
			@close="handleCloseRequest('commentsForm', key)"></form-item>
			<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleRequestSelect('commentsForm')">
				<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
				<text class="fs-28" :style="{color: skinColor.color_1}">添加请求属性</text>
			</view>
		</view>
		<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20"
		:style="{'background-color': skinColor.color_bg_1}">
			<text class="fs-24 y-flex-1 mt-20" :style="{'color': skinColor.color_blue}">comments评论列表动态数据</text>
			<template v-for="(key, i) in Object.keys(commentsForm.dynamicData)">
				<form-item
				v-if="!['subComments', 'masterComments'].includes(key)"
				v-model="commentsForm.dynamicData[key]"
				type="rule"
				:label="(commentData[key] ? commentData[key].label : dynamicList[key] ? dynamicList[key].label : key) + '规则'"
				:disabled="disabled"
				:padding-show="false"></form-item>
			</template>
			<text class="fs-24 y-flex-1 mt-20" :style="{'color': skinColor.color_blue}">subComments子评论列表动态数据</text>
			<template v-for="(k, j) in Object.keys(commentsForm.dynamicData.subComments)">
				<form-item
				v-model="commentsForm.dynamicData.subComments[k]"
				type="rule"
				:label="(commentData[k] ? commentData[k].label : dynamicList[k] ? dynamicList[k].label : k) + '规则'"
				:disabled="disabled"
				:padding-show="false"></form-item>
			</template>
			<text class="fs-24 y-flex-1 mt-20" :style="{'color': skinColor.color_blue}">masterComments父评论列表动态数据</text>
			<template v-for="(k, j) in Object.keys(commentsForm.dynamicData.masterComments)">
				<form-item
				v-model="commentsForm.dynamicData.masterComments[k]"
				type="rule"
				:label="(commentData[k] ? commentData[k].label : dynamicList[k] ? dynamicList[k].label : k) + '规则'"
				:disabled="disabled"
				:padding-show="false"></form-item>
			</template>
		</view>
		
		<!-- 弹幕列表数据 -->
		<template v-if="barrageData">
			<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20"
			:style="{'background-color': skinColor.color_bg_1}">
				<text class="fs-24 y-flex-1" :style="{'color': skinColor.color_blue}">barrages弹幕列表动态请求</text>
				<form-item
				v-for="(key, i) in Object.keys(barragesForm.request)"
				Key="i"
				closeable
				v-model="barragesForm.request[key]"
				:type="request[key].type"
				:label="request[key].label"
				:disabled="disabled"
				:padding-show="false"
				@close="handleCloseRequest('barragesForm', key)"></form-item>
				<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleRequestSelect('barragesForm')">
					<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
					<text class="fs-28" :style="{color: skinColor.color_1}">添加请求属性</text>
				</view>
			</view>
			<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20"
			:style="{'background-color': skinColor.color_bg_1}">
				<text class="fs-24 y-flex-1 mt-20" :style="{'color': skinColor.color_blue}">barrages弹幕列表动态数据</text>
				<template v-for="(key, i) in Object.keys(barragesForm.dynamicData)">
					<form-item
					v-model="barragesForm.dynamicData[key]"
					type="rule"
					:label="(barrageData[key] ? barrageData[key].label : dynamicList[key] ? dynamicList[key].label : key) + '规则'"
					:disabled="disabled"
					:padding-show="false"></form-item>
				</template>
			</view>
		</template>
		
		<!-- 歌词列表数据 -->
		<template v-if="lyricData">
			<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20"
			:style="{'background-color': skinColor.color_bg_1}">
				<text class="fs-24 y-flex-1" :style="{'color': skinColor.color_blue}">lyrics歌词列表动态请求</text>
				<form-item
				v-for="(key, i) in Object.keys(lyricsForm.request)"
				Key="i"
				closeable
				v-model="lyricsForm.request[key]"
				:type="request[key].type"
				:label="request[key].label"
				:disabled="disabled"
				:padding-show="false"
				@close="handleCloseRequest('lyricsForm', key)"></form-item>
				<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleRequestSelect('lyricsForm')">
					<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
					<text class="fs-28" :style="{color: skinColor.color_1}">添加请求属性</text>
				</view>
			</view>
			<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20"
			:style="{'background-color': skinColor.color_bg_1}">
				<text class="fs-24 y-flex-1 mt-20" :style="{'color': skinColor.color_blue}">lyrics歌词列表动态数据</text>
				<template v-for="(key, i) in Object.keys(lyricsForm.dynamicData)">
					<form-item
					v-model="lyricsForm.dynamicData[key]"
					type="rule"
					:label="(lyricData[key] ? lyricData[key].label : dynamicList[key] ? dynamicList[key].label : key) + '规则'"
					:disabled="disabled"
					:padding-show="false"></form-item>
				</template>
			</view>
		</template>
		
		<!-- 组件数据 -->
		<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20" :style="{'background-color': skinColor.color_bg_1}">
			<text class="fs-24 " :style="{'color': skinColor.color_blue}">components组件</text>
			<com-cell
			v-for="(item, index) in componentForm"
			:key="index"
			:title="'组件' + (index+1) + ' - ' + component[item.name].label"
			text="编辑"
			border
			:title-color="skinColor.color_1"
			:text-color="skinColor.color_blue"
			:label-color="skinColor.color_3"
			:border-color="skinColor.color_gap_1"
			padding="30rpx 0"
			:disabled="disabled"
			linkable
			@click="handleEditComponent(item, index)">
				<template #right>
					<com-icon class="ml-10" name="close" size="40rpx" :color="skinColor.color_3" :disabled="disabled" @click="handleCloseComponent($event, index)"></com-icon>
				</template>
			</com-cell>
			<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleAddComponent">
				<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
				<text class="fs-28" :style="{color: skinColor.color_1}">添加组件</text>
			</view>
		</view>
		<!-- 单元格数据 -->
		<view class="y-flex page-padding-gap border-radius-15 pt-20 pb-20 mt-20 ml-20 mr-20" :style="{'background-color': skinColor.color_bg_1}">
			<text class="fs-24 " :style="{'color': skinColor.color_blue}">cell单元格</text>
			<com-cell
			v-if="cellForm && (cellForm.dynamicData || cellForm.staticData || cellForm.style)"
			:title="cell[cellForm.style.cellName || 'h-cell'].label"
			text="编辑"
			border
			:title-color="skinColor.color_1"
			:text-color="skinColor.color_blue"
			:label-color="skinColor.color_3"
			:border-color="skinColor.color_gap_1"
			padding="30rpx 0"
			:disabled="disabled"
			linkable
			@click="handleEditCell(cellForm)">
				<template #right>
					<com-icon class="ml-10" name="close" size="40rpx" :color="skinColor.color_3" :disabled="disabled" @click="handleCloseCell"></com-icon>
				</template>
			</com-cell>
			<view class="y-flex y-row y-align-center y-justify-center mt-20" @tap="handleAddCell" v-else>
				<com-icon name="add" size="35" :color="skinColor.color_1"></com-icon>
				<text class="fs-28" :style="{color: skinColor.color_1}">添加单元格</text>
			</view>
		</view>
	</base-page>
</template>

<script>
	import BasePage from './base.vue'
	import FormItem from '../components/FormItem.vue'
	import FormHeader from '../components/Header.vue'
	import { Component, Cell, Page, Request, DynamicList } from '@/assets/js/interface.js'
	export default {
		components: { BasePage, FormHeader, FormItem },
		inject: ['getSkinColor', 'getQuery', 'selectOptions', 'selectIcon', 'Router', 'deepClone', 'deleteProperty', 'promptShow'],
		computed: {
			skinColor () {
				return this.getSkinColor()
			},
			query () {
				return this.getQuery()
			},
			disabled () {
				return this.query.disabled
			},
			type () {
				return this.query.type || ''
			},
			dynamicList () {
				return DynamicList
			},
			detailData () {
				return Page[this.type].detailData
			},
			tagData () {
				return Page[this.type].tagData
			},
			itemData () {
				return Page[this.type].itemData
			},
			contextData () {
				return Page[this.type].contextData
			},
			commentData () {
				return Page[this.type].commentData
			},
			barrageData () {
				return Page[this.type].barrageData
			},
			lyricData () {
				return Page[this.type].lyricData
			},
			request () {
				return Request
			},
			component () {
				return Component
			},
			cell () {
				return Cell
			},
			originForm () {
				return this.query.form
			}
		},
		data () {
			return {
				detailForm: {},
				itemsForm: {},
				contextForm: {},
				commentsForm: {},
				barragesForm: {},
				lyricsForm: {},
				componentForm: {},
				cellForm: {}
			}
		},
		created() {
			this.$set(this.detailForm, 'staticData', this.deepClone(this.getStaticDataValue(this.detailData)))
			this.$set(this.detailForm.staticData, 'tags', [])
			this.$set(this.detailForm, 'request', {})
			this.$set(this.detailForm, 'dynamicData', this.deepClone(this.getStaticDataValue(this.detailData)))
			this.$set(this.detailForm.dynamicData, 'tags', this.deepClone(this.getDynamicDataValue(this.tagData)))
			
			
			this.$set(this.commentsForm, 'staticData', [])
			this.$set(this.commentsForm, 'request', {})
			const commentData = Object.assign({}, this.getDynamicDataValue(this.commentData), {
				subComments: this.getDynamicDataValue(this.commentData),
				masterComments: this.getDynamicDataValue(this.commentData)
			})
			this.$set(this.commentsForm, 'dynamicData', this.deepClone(commentData))
			
			if ( this.itemData ) {
				this.$set(this.itemsForm, 'staticData', [])
				this.$set(this.itemsForm, 'request', {})
				this.$set(this.itemsForm, 'dynamicData', this.deepClone(this.getDynamicDataValue(this.itemData)))
			}
			
			if ( this.contextData ) {
				this.$set(this.contextForm, 'staticData', this.deepClone(this.getStaticDataValue(this.contextData)))
				this.$set(this.contextForm, 'request', {})
				this.$set(this.contextForm, 'dynamicData', this.deepClone(this.getStaticDataValue(this.contextData)))
			}
			
			if ( this.barrageData ) {
				this.$set(this.barragesForm, 'staticData', [])
				this.$set(this.barragesForm, 'request', {})
				this.$set(this.barragesForm, 'dynamicData', this.deepClone(this.getDynamicDataValue(this.barrageData)))
			}
			if ( this.lyricData ) {
				this.$set(this.lyricsForm, 'staticData', [])
				this.$set(this.lyricsForm, 'request', {})
				this.$set(this.lyricsForm, 'dynamicData', this.deepClone(this.getDynamicDataValue(this.lyricData)))
			}
			
			if ( this.originForm ) {
				this.componentForm = this.originForm.components || []
				this.cellForm = this.originForm.cell || {}
				
				const detail = this.originForm.detail || {}
				const items = this.originForm.items || {}
				const context = this.originForm.context || {}
				const comments = this.originForm.comments || {}
				const barrages = this.originForm.barrages || {}
				const lyrics = this.originForm.lyrics || {}
				
				Object.keys(detail).forEach(key => {
					if ( key == 'staticData' ) this.$set(this.detailForm, key, Object.assign({}, this.getStaticDataValue(this.detailData), detail[key]))
					if ( key == 'request' ) this.$set(this.detailForm, key, detail[key])
					if ( key == 'dynamicData' ) this.$set(this.detailForm, key, Object.assign({}, this.getStaticDataValue(this.detailData), detail[key]))
				})
				if ( !this.detailForm.staticData.tags ) this.$set(this.detailForm.staticData, 'tags', [])
				if ( !this.detailForm.dynamicData.tags ) this.$set(this.detailForm.dynamicData, 'tags', this.deepClone(this.getDynamicDataValue(this.tagData)))
				
				Object.keys(items).forEach(key => {
					if ( key == 'staticData' ) this.$set(this.itemsForm, key, items[key])
					if ( key == 'request' ) this.$set(this.itemsForm, key, items[key])
					if ( key == 'dynamicData' ) this.$set(this.itemsForm, key, Object.assign({}, this.getDynamicDataValue(this.itemData), items[key]))
				})
				
				Object.keys(context).forEach(key => {
					if ( key == 'staticData' ) this.$set(this.contextForm, key, Object.assign({}, this.getStaticDataValue(this.contextData), context[key]))
					if ( key == 'request' ) this.$set(this.contextForm, key, context[key])
					if ( key == 'dynamicData' ) this.$set(this.contextForm, key, Object.assign({}, this.getStaticDataValue(this.contextData), context[key]))
				})
				
				Object.keys(comments).forEach(key => {
					if ( key == 'staticData' ) this.$set(this.commentsForm, key, comments[key])
					if ( key == 'request' ) this.$set(this.commentsForm, key, comments[key])
					if ( key == 'dynamicData' ) this.$set(this.commentsForm, key, Object.assign({}, this.commentsForm[key], comments[key]))
				})
				
				Object.keys(barrages).forEach(key => {
					if ( key == 'staticData' ) this.$set(this.barragesForm, key, barrages[key])
					if ( key == 'request' ) this.$set(this.barragesForm, key, barrages[key])
					if ( key == 'dynamicData' ) this.$set(this.barragesForm, key, Object.assign({}, this.barragesForm[key], barrages[key]))
				})
				
				Object.keys(lyrics).forEach(key => {
					if ( key == 'staticData' ) this.$set(this.lyricsForm, key, lyrics[key])
					if ( key == 'request' ) this.$set(this.lyricsForm, key, lyrics[key])
					if ( key == 'dynamicData' ) this.$set(this.lyricsForm, key, Object.assign({}, this.lyricsForm[key], lyrics[key]))
				})
			}
		},
		methods: {
			onShow () {
				uni.$off('componentSelect')
				uni.$off('cellSelect')
			},
			getStaticDataValue (data) {
				const obj = {}
				Object.keys(data).forEach(key => {
					obj[key] = data[key].value
				})
				return obj
			},
			getDynamicDataValue (data) {
				const obj = {}
				Object.keys(data).forEach(key => {
					obj[key] = data[key].value
				})
				const dynamic = {}
				Object.keys(this.dynamicList).forEach(key => {
					dynamic[key] = this.dynamicList[key].value
				})
				return {...dynamic, ...obj}
			},
			handleAddStaticTag () {
				this.detailForm.staticData.tags.push({
					title: '',
					url: ''
				})
			},
			handleCloseStaticTag (index) {
				this.detailForm.staticData.tags.splice(index, 1)
			},
			handleAddDynamicProperty () {
				this.promptShow({
					title: '添加自定义属性',
					success: res => {
						if ( res.confirm ) {
							this.$set(this.itemsForm.dynamicData, res.detail.value, '')
						}
					}
				})
			},
			handleCloseDynamicProperty (k) {
				this.itemsForm.dynamicData = this.deleteProperty(this.itemsForm.dynamicData, k)
			},
			handleRequestSelect (formName) {
				if ( this.disabled ) return
				this.selectOptions({
					title: '选择添加的属性',
					actions: Object.keys(this.request).filter(key => Object.keys(this[formName].request).indexOf(key) == -1).map(key => this.request[key].label),
					success: res => {
						const keys = Object.keys(this.request)
						const index = keys.findIndex(key => this.request[key].label == res.detail.label )
						const key = keys[index]
						this.$set(this[formName].request, key, this.request[key].value)
					}
				})
			},
			handleCloseRequest (formName, k) {
				this[formName].request = this.deleteProperty(this[formName].request, k)
			},
			handleAddComponent () {
				if ( this.disabled ) return
				const component = Object.assign({}, this.component, {'sub-card': {'label': '分段卡片'}})
				const keys = Object.keys(component)
				this.selectOptions({
					title: '需要添加什么类型的组件',
					actions: keys.map(key => component[key].label),
					success: res => {
						const index = keys.findIndex(key => component[key].label == res.detail.label)
						const key = keys[index]
						uni.$once('componentSelect', data => {
							this.componentForm.push(data)
						})
						this.Router.push({path: '/pages/program/form/comp/index', query: {type: key}})
					}
				})
			},
			handleEditComponent (item, index) {
				uni.$once('componentSelect', data => {
					this.$set(this.componentForm, index, data)
				})
				this.Router.push({path: '/pages/program/form/comp/index', query: {type: item.name, form: item, disabled: this.disabled}})
			},
			handleCloseComponent (e, index) {
				 e.stopPropagation && e.stopPropagation()
				 this.componentForm.splice(index, 1)
			},
			handleAddCell () {
				if ( this.disabled ) return
				uni.$once('cellSelect', data => {
					this.cellForm = data
				})
				this.Router.push({path: '/pages/program/form/pages/cell'})
			},
			handleEditCell (item) {
				uni.$once('cellSelect', data => {
					this.cellForm = data
				})
				this.Router.push({path: '/pages/program/form/pages/cell', query: {form: item, disabled: this.disabled}})
			},
			handleCloseCell (e) {
				 e.stopPropagation && e.stopPropagation()
				 this.cellForm = {}
			},
			handleSubmit (form) {
				this.$emit('submit', Object.assign({}, form, {
					detail: this.detailForm,
					items: this.itemsForm,
					context: this.contextForm,
					comments: this.commentsForm
				}))
			}
		}
	}
</script>

<style>

</style>